<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>The Cairo graphics library</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="cairo, graphics, C, 2D vector library">
<meta name="description" content="This is introductory chapter to the Cairo graphics
tutorial.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>The Cairo graphics library</h1>


<p>
Welcome to the Cairo graphics tutorial. This tutorial will teach you 
basics and some advanced topics of the Cairo 2D vector drawing library. 
In most examples we will use the GTK+ programming library.
This tutorial is done in C programming language.
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script>


<h2>2D Vector Graphics</h2>

<p>
There are two different computer graphics. <b>Vector</b> and <b>raster</b> graphics. 
Raster graphics represents images as a collection of pixels. Vector graphics 
is the use of geometrical primitives such as points, lines, curves or polygons 
to represent images. These primitives are created using mathematical equations. 
</p>

<p>
Both types of computer graphics have advantages and disadvantages. The advantages 
of vector graphics over raster are:
</p>

<ul>
<li>smaller size</li>
<li>ability to zoom indefinitely</li>
<li>moving, scaling, filling or rotating does not degrade the quality of an image </li>
</ul>

<h2>Cairo</h2>

<p>
Cairo is a library for creating 2D vector graphics. It is written in the C 
programming language. Bindings for other computer languages exist. Python, Perl, 
C++, C#, Java. Cairo is a multiplatform library, works on Linux, BSDs, OSX.
</p>

<p>
Cairo supports various backends.
</p>

<ul>
<li>X Window System</li>
<li>Win32 GDI</li>
<li>Mac OS X Quartz</li>
<li>PNG</li>
<li>PDF</li>
<li>PostScript</li>
<li>SVG</li>
</ul>

<p>
This means, we can use the library to draw on windows on Linux/BSDs, 
Windows, OSX and we can use the library to create
PNG images, PDF files, PostScript files and SVG files.
</p>

<p>
We can compare the cairo library to the <b>GDI+</b> library on Windows 
OS and the <b>Quartz 2D</b> on Mac OS. Cairo is an open source software 
library. From version 2.8, the cairo library is part of the <b>GTK+</b> system.
</p>

<h2>Compiling examples</h2>

<p>
The examples are created in the C programming language. We use GNU C compiler to compile them.
</p>


<pre>
gcc example.c -o example `pkg-config --cflags --libs gtk+-3.0` 
</pre>

<p>
Note that the order of compiling options is important.
</p>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified December 8, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body> 
</html>



